<div class="rounded-md bg-red-50 p-4">
  <div class="flex">
    <div class="flex-shrink-0">
      <%= inline_svg_tag "icons/solid/x_circle.svg", class: "h-5 w-5 text-red-400", aria_hidden: true %>
    </div>
    <div class="ml-3">
      <h3 class="text-sm font-medium text-red-800"><%= title %></h3>
      <div class="mt-2 text-sm text-red-700">
        <p><%= body %></p>
      </div>
      <div class="mt-4">
        <div class="-mx-2 -my-1.5 flex">
          <% if expired? %>
            <%= link_to cta, pricing_path, class: "bg-red-50 px-2 py-1.5 rounded-md text-sm font-medium text-red-800 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600" %>
          <% else %>
            <%= link_to cta, stripe_portal_path, class: "bg-red-50 px-2 py-1.5 rounded-md text-sm font-medium text-red-800 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600" %>
            <%= link_to t(".details"), pricing_path, class: "ml-3 bg-red-50 px-2 py-1.5 rounded-md text-sm font-medium text-red-800 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600" %>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>
